<template>
	<view class="person-content">
		<view class="head-img" @tap="changeHead">
			<img :src="params.face ? params.face : '../../static/img/person/head.png'" />
		</view>
		<view class="information-input">
			<view class="nick">
				<text calss="title-row">昵称</text>
				<u-input placeholder="请填写" v-model="params.nick" :clearable="false" style="height:90rpx"></u-input>
			</view>
			<view class="sex">
				<text>性别</text>
				<u-input placeholder="请选择" type="idcard" v-model="sexLabel" disabled :clearable="false" style="height:90rpx"
					@click="selectSexHandle">
				</u-input>
				<u-icon name="arrow-right" color="#909399"></u-icon>
			</view>
			<view class="choose-date">
				<text>出生年月</text>
				<u-input placeholder="请选择" v-model="params.birthday" disabled :clearable="false" style="height:90rpx"
					@click="chooseDate">
				</u-input>
				<u-icon name="arrow-right" color="#909399"></u-icon>
			</view>
			<view class="choose-height">
				<text>身高</text>
				<u-input placeholder="请输入" type="number" v-model="params.height" :clearable="false" style="height:90rpx" @blur="heightHandle">
				</u-input>
				<text>cm</text>
			</view>
			<view class="choose-weight">
				<text>体重</text>
				<u-input placeholder="请输入" type="number" v-model="params.weight" :clearable="false" style="height:90rpx" @blur="weightHandle">
				</u-input>
				<text>kg</text>
			</view>
			<view class="next-btn-row">
				<u-button type="default" shape="circle" text="下一步" class="next-btn" @tap="nextHandle"
					hover-class="none">下一步</u-button>
			</view>
			<!-- <view class="skip-row">
				<text @tap="nextHandle">跳过</text>
			</view> -->
		</view>
		<!-- 头像选择弹出框 -->
		<u-popup v-model="headShow" @close="close" mode="bottom" class="select-head">
			<view>
				<view class="head-row" @tap="chooseHead(1)">
					<text>相册</text>
				</view>
				<view class="head-row" @tap="chooseHead(2)">
					<text>拍照</text>
				</view>
				<view class="cancel" @tap="close">
					<text>取消</text>
				</view>
			</view>
		</u-popup>
		<!-- 性别选择弹出框 -->
		<u-popup v-model="show" @close="close" mode="bottom" class="select-sex">
			<view>
				<view class="sex-row" @tap="chooseHandle('男')">
					<text>男</text>
				</view>
				<view class="sex-row" @tap="chooseHandle('女')">
					<text>女</text>
				</view>
				<view class="cancel" @tap="close">
					<text>取消</text>
				</view>
			</view>
		</u-popup>
		<!-- 时间弹出框 -->
		<view>
			<u-picker v-model="dateShow" :params="date" @confirm="dateConfirm"></u-picker>
		</view>
	</view>
</template>

<script>
	import { API } from '../../config/myApi.js';
	export default {
		data() {
			return {
				sexLabel: '',
				params: {
					face: '',
					nick: '',
					sex: '',
					birthday: '',
					height: '',
					// mobilePhone: '',
					nickName: '',
					weight: '',
					targetType: '',
				},
				headShow: false,
				//性别
				show: false,
				//日期
				dateShow: false,
				date: {
					year: true,
					month: true,
					day: true,
				},
			}
		},
		methods: {
			//更换头像
			changeHead() {
				//更换head地址
				this.headShow = true;
				console.log('更换头像');
			},
			chooseHead(code) {
				//code为1调用相册,code为2调用相机
				if (code == 1) {
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						sourceType: ['camera', 'album'], //这要注意，camera掉拍照，album是打开手机相册
						success: (res) => {
							// console.log(res);
							const tempFilePaths = res.tempFilePaths;
							this.params.face = res.tempFilePaths[0]
							// this.$forceUpdate();
							console.log(this.params.face );
							this.headShow = false;
						}
					});
				} else if (code == 2) {
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						sourceType: ['camera', 'album'], //这要注意，camera掉拍照，album是打开手机相册
						success: (res) => {
							// console.log(res);
							const tempFilePaths = res.tempFilePaths;
							this.params.face = res.tempFilePaths[0]
							// this.$forceUpdate();
							console.log(this.params.face );
							this.headShow = false;
						}
					});
				}
			},
			//选择性别
			selectSexHandle(e) {
				this.show = true;
				console.log(this.show,e);
			},
			
			//弹出框的关闭
			close() {
				this.show = false;
				this.headShow = false;
			},
			//弹出框选择性别
			chooseHandle(sex) {
				this.sexLabel=sex;
				if(sex==="男") {
					this.params.sex = '1';
				}else {
					this.params.sex = '0';
				}
				
				console.log('sss',sex)
				this.show = false;
			},
			//呼出日期选择器
			chooseDate() {
				this.dateShow = true;
			},
			//选择日期后自动填入
			dateConfirm(val) {
				this.params.birthday = val.year + '-' + val.month + '-' + val.month;
				console.log(val,this.params.birthday);
			},
			//监听身高发生改变，进行处理
			heightHandle(val){
				if(val < 0){
					this.params.height = "";
				}else if(val > 300){
					this.params.height = 300;
				}
			},
			//监听身高体重发生改变，进行处理
			weightHandle(val){
				if(val < 0){
					this.params.weight = "";
				}else if(val > 200){
					this.params.weight = 200;
				}
			},
			//下一步
			nextHandle() {
				//校验信息是否完整
				const number = uni.getStorageSync('number');
				const username = uni.getStorageSync('username');
				const userType = uni.getStorageSync('userType');
				const pram = {
					...this.params,
					userType: userType,
					number: number, // 学号-工号
					username: username,
				}
				uni.setStorageSync('regData', pram);
				console.log('下一步',pram);
				// API.register(pram).then(res=> {
				// 	console.log('fff',res)
				// 	if(res.code==="200") {
				// 		uni.navigateTo({
				// 			url: '/pages/person/sportPurpose'
				// 		})
				// 	}
				// }
				// console.log("prammmm", regData)
				uni.navigateTo({
					url: '/pages/person/sportPurpose'
				})
			},
			//跳过
			skipHandle() {
				console.log('跳过');
				uni.navigateTo({
					url: '/pages/person/sportPurpose'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.person-content {
		min-height: calc(100vh - 88rpx);
		background-color: #fff;
		padding: 0rpx 50rpx;
		overflow: hidden;

		.head-img {
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
			overflow: hidden;
			margin: 40rpx auto 0rpx;
			border: 1px solid #999999;

			>img {
				width: 180rpx;
				height: 180rpx;
			}
		}

		.information-input {
			margin-top: 60rpx;

			.nick,
			.sex,
			.choose-date,
			.choose-height,
			.choose-weight {
				border-bottom: 1rpx solid #E3E3E3;
				overflow: hidden;
				display: flex;
				position: relative;

				>text:nth-of-type(1) {
					display: block;
					width: 165rpx;
					font-size: 28rpx;
					color: #333333;
					padding-top: 16rpx;
				}
				>text:nth-of-type(2) {
					display: block;
					// width: 165rpx;
					font-size: 28rpx;
					color: #333333;
					padding-top: 16rpx;
				}

				>img {
					width: 13rpx;
					height: 24rpx;
					position: absolute;
					right: 0rpx;
					top: 24rpx;
				}
			}

			.sex,
			.choose-date,
			.choose-height,
			.choose-weight {
				margin-top: 50rpx;
			}

			.next-btn-row {
				margin-top: 60rpx;

				.next-btn {
					background-color: #F4333C;
					color: #fff;
					height: 90rpx;
				}

				.u-hairline-border:after {
					border: none;
				}
			}

			.skip-row {
				margin-top: 40rpx;
				font-size: 26rpx;
				color: #999999;
				text-align: center;
				margin-bottom: 40rpx;
			}
		}

		//选择性别
		.select-sex,
		.select-head {
			width: 710rpx;
			margin: 0rpx auto 40rpx;
			overflow: hidden;

			::v-deep.u-drawer-content {
				border-radius: 10rpx !important;
				overflow: hidden;
			}

			.sex-row,
			.head-row {
				height: 113rpx;
				text-align: center;
				line-height: 113rpx;
				font-size: 30rpx;
				font-weight: bold;
			}

			.cancel {
				height: 100rpx;
				line-height: 100rpx;
				color: #666666;
				font-weight: 100;
				text-align: center;
				border-top: 1rpx solid #E3E3E3;
			}
		}
	}
</style>
